<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html>
<html>
  <head>
    <base href="<%=basePath%>">
    <%@ taglib uri="/struts-tags" prefix="s"%>
    <%@include file="./headMeta.jsp" %>
    <link rel="stylesheet" type="text/css" href="./resource/css/ordering.css">
  </head>
  <body class="skin-blue">
    <%@include file="./header.jsp" %>
    <div class="wrapper row-offcanvas row-offcanvas-left">
        <!-- Left side column. contains the logo and sidebar -->
        <%@include file="./sidebar.jsp" %>

      <!-- Right side column. Contains the navbar and content of the page -->
      <aside class="right-side">
        <!-- Content Header (Page header) -->
        <section class="content-header">
            <h1>
                收银
            </h1>
        </section>

        <!-- Main content -->
        <section class="content">
            <div class="row">
                <div class="col-md-12">
                    <div>
                        <div class="order-main cf" id="orderMain" style="display: none">
                            <div class="product-wrap">
                                <ul class="product">
                                    <li v-repeat="list">
                                        <div class="product-type" v-on="click: toggle(this)">
                                            {{ptname}}
                                            <a href="javascript:void(0)" class="triangle-down" v-if="!display" ></a>
                                            <a href="javascript:void(0)" class="triangle-up" v-if="display" ></a>
                                        </div>
                                        <ul class="product-list" v-if="display">
                                            <li v-repeat="products" v-on="click: addOrder(this)" class="btn btn-primary btn-sm">{{pname}}</li>
                                        </ul>
                                    </li>
                                </ul>
                            </div>
                            <div class="order-wrap">
                                <ul class="order-ul order-header">
                                    <li class="order-li-first">产品</li>
                                    <li>单价</li>
                                    <li>数量</li>
                                    <li>操作</li>
                                </ul>
                                <ul class="order-list">
                                    <li v-repeat="order">
                                        <ul class="order-ul order-item">
                                            <li class="order-li-first">{{pname}}</li>
                                            <li>{{price}}</li>
                                            <li>{{count}}</li>
                                            <li><a href="javascript:void(0)" v-on="click: removeOrder(this)" class="order-item-remove"></a></li>
                                        </ul>
                                    </li>
                                </ul>
                                <div class="order-account-wrap">
                                    <ul class="order-account">
                                        <li>总价{{sum}}</li>
                                        <li>付款<input type="text" v-model="payment"></li>
                                        <li>找零{{change}}</li>
                                    </ul>
                                    <div class="order-account-ctl">
                                        <a href="javascript:void(0)" v-on="click:submit" class="btn btn-primary">提交</a>
                                        <a href="javascript:void(0)" v-on="click:resetOrder" class="btn btn-primary">重置</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div><!-- /.col -->
            </div><!-- /.row -->
        </section><!-- /.content -->   
      </aside>
    </div><!-- ./wrapper -->
  </body>
  <%@include file="./javascript.jsp" %>
  <script type="text/javascript" src="./resource/js/vue.min.js"></script>
  <script type="text/javascript">
    var RENDER = {};
    /* RENDER.list = Mock.mock({
        'list|5' : [{
            'id|+1' : 1,
            'name': '@WORD',
            'display|1-1': true || false,
            'list|3': [{
                'id|+1': 1,
                'name': '@WORD',
                'price|1-100': 1,
                'count': 0,
                'onSale|1-1': true || false
            }]
        }]
    }).list; */
    
    RENDER.list = ${json};
    RENDER.userId = ${userId};
  </script>
  <script type="text/javascript" src="./resource/js/main.js"></script>
</html>
